<template>
	<view class="searchContainer">
		<view class="searchHeader">
			<view class="inputWrap">
				<i class="iconfont icon-search"></i>
				<input type="text" placeholder="请输入您搜索的商品" v-model="goodsName"/>
			</view>
			<button type="default" @click="toGoodList(goodsName)">搜索</button>
		</view>
		<view class="searchFooter">
			<view class="his-head">
				<text class="title">最近搜索</text>
			</view>
			<view class="his-list">
				<view class="his-item" @click="toGoodList(item)" v-for="(item,index) in searchTitle" :key="index">{{item}}</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				// placeholderContent:'', 
				goodsName:undefined,
				searchTitle:[]
			};
		},
		mounted() {
			
		},
		methods:{
			//跳到商品分类
			toGoodList(name){
				if(this.goodsName){
					const isHas = this.searchTitle.find(item=>item === this.goodsName)
					!isHas && this.searchTitle.push(this.goodsName)
					wx.navigateTo({
						url:'/pages/goodsList/goodsList?goodsName='+name
					})
				}else if(this.goodsName===undefined){
					uni.showToast({
					    title: '请输入搜索的商品',
							icon:'error',
					    duration: 2000
					});
				}
				
			}
		}
	}
</script>

<style lang="stylus">
.searchContainer
	height 100%
	background-color #f7f7f7
	.searchHeader
		margin 20upx
		height 90upx
		background #fff
		display flex
		border-radius 10upx 0 0 10upx
		.inputWrap
			flex 4
			display flex
			align-items center
			padding 20upx
			box-sizing border-box
			margin-right 10upx
			.iconfont
				font-size 36upx
				margin-right 20upx
				vertical-align middle
				color #C8C7CC
			input
				font-size 32upx
				color #808080
				vertical-align middle
		button
			background-color #fa2209
			color #fff
			flex 1
			border-radius 0 10upx 10upx 0
	.searchFooter
		.his-head
			padding-top 10upx
			margin-left 20upx
			.title
				font-size 32upx
				color #808080
		.his-list
			padding 10upx 0
			overflow hidden
			display flex
			flex-wrap wrap
			// justify-content space-around
			.his-item
				width: 33.33%;
				margin-top 20upx
				border 1upx solid #eee
				background-color #fff
				border-radius 50upx
				text-align center
				padding 10upx 0
				// &:nth-child(3n) 
				// 	margin-right 0
				box-sizing: border-box;
				// margin-right 10upx
				font-size 26upx
				display inline-block
</style>
